<template>
  <div class="parking-records">
    <div style="background-color:#fff;">
      <el-card style="width: 100%">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="停车缴费记录" name="payment">
        <el-form :inline="true" class="search-form">
          <el-row :gutter="30">
            <el-col :span="4">
          <el-form-item label="用户名">
            <el-input v-model="paymentSearch.username" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="车牌号">
            <el-input v-model="paymentSearch.license" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="停车场">
            <el-select placeholder="请选择" v-model="paymentSearch.parklotId" style="width: 100px">
              <el-option v-for="item in parkingLotArr" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="订单编号">
            <el-input v-model="paymentSearch.orderNum" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="支付单号">
            <el-input v-model="paymentSearch.payNum" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="支付方式">
                <el-select placeholder="请选择" v-model="paymentSearch.paymentMethod" style="width: 100px">
                  <el-option
                      v-for="method in paymentMethods"
                      :key="method.value"
                      :label="method.label"
                      :value="method.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="searchPaymentRecords">查询</el-button>
            <el-button @click="resetPaymentSearch">重置</el-button>
            <el-button type="warning" @click="exportPaymentRecords">导出</el-button>
          </el-form-item>
        </el-form>
          <hr>
        <el-table :data="paymentRecords" style="width: 100%" class="centered-table">
<!--          <el-table-column type="selection" width="55"></el-table-column>-->
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="orderNum" label="订单编号"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="license" label="车牌号"></el-table-column>
          <el-table-column prop="parklotName" label="停车场"></el-table-column>
          <el-table-column prop="duration" label="停车时长"></el-table-column>
          <el-table-column prop="amount" label="费用（元）"></el-table-column>
          <el-table-column prop="paymentMethod" label="支付方式"></el-table-column>
          <el-table-column prop="payNum" label="支付单号"></el-table-column>
          <el-table-column prop="payTime" label="支付时间"></el-table-column>
          <el-table-column prop="remarks" label="备注"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-space>
                <el-button size="small" @click="viewPaymentRecord(scope.row)">详情</el-button>
                <el-button size="small" type="danger" @click="deletePaymentRecord(scope.row)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="车位卡购买记录" name="purchase">
        <el-form :inline="true" class="search-form">
          <el-row :gutter="30">
            <el-col :span="4">
          <el-form-item label="车牌号">
            <el-input v-model="purchaseSearch.license" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="手机号">
            <el-input v-model="purchaseSearch.phoneNumber" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="停车场">
            <el-select placeholder="请选择" v-model="purchaseSearch.parklotId" style="width: 100px">
              <el-option v-for="item in parkingLotArr" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="车位卡ID">
            <el-input v-model="purchaseSearch.cardId" placeholder="请输入"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label="车位卡类型" >
            <el-select v-model="purchaseSearch.cardType" placeholder="请选择" style="width: 100px">

              <el-option label="包天卡" value="包天卡"></el-option>
              <el-option label="时长卡" value="时长卡"></el-option>
            </el-select>
          </el-form-item>
            </el-col>
            <el-col :span="4">

          <el-form-item label="支付方式">
            <el-select placeholder="请选择" v-model="purchaseSearch.paymentMethod" style="width: 100px">
              <el-option
                  v-for="method in paymentMethods"
                  :key="method.value"
                  :label="method.label"
                  :value="method.value"
              ></el-option>
            </el-select>
          </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="searchPurchaseRecords">查询</el-button>
            <el-button @click="resetPurchaseSearch">重置</el-button>
            <el-button type="warning" @click="exportPurchaseRecords">导出</el-button>
          </el-form-item>
        </el-form>

        <hr>
        <el-table :data="purchaseRecords" style="width: 100%" class="centered-table">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="orderNum" label="订单编号"></el-table-column>
          <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
          <el-table-column prop="license" label="车牌号"></el-table-column>
          <el-table-column prop="parkingLot" label="停车场名称"></el-table-column>
          <el-table-column prop="parkCardId" label="车位卡ID"></el-table-column>
          <el-table-column prop="cardName" label="车位卡名称"></el-table-column>
          <el-table-column prop="cardType" label="类型"></el-table-column>
          <el-table-column prop="amount" label="支付金额（元）"></el-table-column>
          <el-table-column prop="payMethod" label="支付方式"></el-table-column>
          <el-table-column prop="payNum" label="支付单号"></el-table-column>
          <el-table-column prop="payTime" label="支付时间"></el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
      </el-card>
    </div>


  </div>
</template>

<script>
import {onMounted, ref, reactive } from 'vue';
import qs from "qs";
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  setup() {
    const activeTab = ref('purchase')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalRecords = ref(80)

    const paymentSearch = reactive({
      username: '',
      license: '',
      parklotId: '',
      orderNum: '',
      paymentMethod: '',
      payNum: ''
    })
    const searchParkingForm = ref({parkcode:'',name:'',address:'',adminId:'',status:''});
    const loadParking = ()=>{

      let data = qs.stringify(searchParkingForm.value);
      axios.get(BASE_URL+'/parklot/select?'+data).then((response)=>{
        if(response.data.code==2000){
          parkingLotArr.value = response.data.data;
          console.log(parkingLotArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
    }
    const exportPurchaseRecords = () => {
      const customLink = (BASE_URL+'/v1/payRecord/download');

      // 使用 window.location.href 跳转到该链接
      window.location.href = customLink;
      ElMessage.success('导出成功');
    }

    const exportPaymentRecords = () => {
      const customLink = (BASE_URL+'/v1/parkrecord/download');

      // 使用 window.location.href 跳转到该链接
      window.location.href = customLink;
      ElMessage.success('导出成功');
    }

    const parkingLotArr = ref([])
    const paymentMethods = ref([
      { label: '现金', value: '现金' },
      { label: '微信', value: '微信' },
      { label: '支付宝', value: '支付宝' },
      { label: '车位卡', value: '车位卡' }
    ]);
    const purchaseSearch = reactive({
      license: '',
      phoneNumber: '',
      parklotId: '',
      cardId: '',
      // cardName: '',
      cardType: '',
      // orderNum: '',
      // payNum: '',
      paymentMethod: ''
      // payTime: []
    })


    const paymentRecords = ref([

    ])

    const purchaseRecords = ref([

    ])
    // const handleClose = ()=>{
    //     dialogVisible.value = false;
    // }
    const searchPaymentRecords = () => {
      //console.log('Searching payment records:', paymentSearch)
      // 重新加载数据
      let data = qs.stringify(paymentSearch);
      console.log(data);
      axios.get(BASE_URL+'/v1/payRecord/searchParkCharg?'+data).then(res => {
        // console.log(res.data.code);
        if(res.data.code === 2000){
          paymentRecords.value = res.data.data;
          console.log(paymentRecords.value );
        }else{
          ElMessage.error(res.data.msg)
        }
      })
    }
    onMounted(() => {
      searchPaymentRecords();
      searchPurchaseRecords();
       loadParking();
    });
    const resetPaymentSearch = () => {
      Object.keys(paymentSearch).forEach(key => paymentSearch[key] = '')
    }



    const searchPurchaseRecords = () => {
      let data = qs.stringify(purchaseSearch);
      console.log(data);
      axios.get(BASE_URL+'/v1/payRecord/searchParkCard?'+data).then(res => {
        if(res.data.code === 2000){
          purchaseRecords.value = res.data.data;
          console.log(purchaseRecords.value);
        }else{
          ElMessage.error(res.data.msg)
        }
      })
      console.log('Searching purchase records:', purchaseSearch)
    }

    const resetPurchaseSearch = () => {
      Object.keys(purchaseSearch).forEach(key => purchaseSearch[key] = '')
    }



    const viewPaymentRecord = (row) => {
      console.log('Viewing payment record:', row)
    }

    const deletePaymentRecord = (row) => {
      console.log('Deleting payment record:', row)
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      // 重新加载数据
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
      // 重新加载数据
    }

    return {

      activeTab,
      currentPage,
      pageSize,
      totalRecords,
      //dialogVisible,
      //dialogTitle,
      paymentSearch,
      parkingLotArr,
      paymentMethods,
      purchaseSearch,
      paymentRecords,
      purchaseRecords,
      //handleClose,
      searchPaymentRecords,
      resetPaymentSearch,
      exportPaymentRecords,
      searchPurchaseRecords,
      resetPurchaseSearch,
      exportPurchaseRecords,
      viewPaymentRecord,
      deletePaymentRecord,
      handleSizeChange,
      handleCurrentChange
    }
  }
}


</script>

<style scoped>
.parking-records {
  font-family: Arial, sans-serif;

  margin: 0 auto;
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.centered-table :deep(.el-table__cell) {
  text-align: center;
}

.centered-table :deep(.el-table__header-wrapper) {
  text-align: center;
}

.centered-table :deep(.el-table__header th) {
  text-align: center;
}

</style>